<template>
  <CustomNavBar title="IPO">
    <!-- <div>record</div> -->
  </CustomNavBar>
  <div class="container">
    <van-tabs class="tabs" scrollspy v-model:active="active" background="#0d111a" title-inactive-color="#325d79"
      title-active-color="#62f792" color="#325d79" @click-tab="onClickTab">
      <van-tab :title="t('Initial Public Offe')"> </van-tab>
      <van-tab :title="t('Pending Allocation')"> </van-tab>
      <van-tab :title="t('Pending Listing')"> </van-tab>
      <van-tab :title="t('Listed')"> </van-tab>
    </van-tabs>

    <div class="record-list">
      <van-list v-model:loading="loading" :loading-text="t('loading......')" :finished="finished" :finishedText="t('No more data')" @load="getIpoList">
        <van-cell v-for="e in IPOList" :key="e.id">
          <div class="record-item">
            <div class="tikcer">{{e.ticker}}</div>
            <div class="record-item-content">
              <div class="record-item-content-item">
                <div class="record-item-content-item-top">{{ e.name }}</div>
                <div class="record-item-content-item-bottom">{{ date(e.start_time) }}<br>{{ date(e.end_time) }}</div>
              </div>
              <div class="record-item-content-item">
                <div class="record-item-content-item-top">Price</div>
                <div class="record-item-content-item-bottom amount">₹{{ e.price }}/{{e.ins_price}}</div>
              </div>
              <div class="record-item-content-item">
                <div class="record-item-content-item-top" v-if="active === 0">
                  <div class="record-item-content-item-top-buy" @click="openSheetPop(e)">{{t('Subscription')}}</div>
                </div>
                <div class="record-item-content-item-bottom">
                  <div class="record-item-content-item-bottom-details" @click="goDetail(e)">{{t('Details')}}</div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="record-item" v-if="active == 3">
             -->
        </van-cell>
      </van-list>
      <div class="empty" v-if="!IPOList.length">
        <img src="@/assets/images/No-records_03.df9abc64.png" alt="" />
      </div>
    </div>


    <van-popup v-model:show="showPopup" position="bottom" closeable @close="close">
      <div class="sheet-content">
        <div style="color: #333;padding: 0.3rem 0.5rem 0.3rem 0.2rem;font-size: 0.5rem;color: #000; opacity: 0;">
          {{clickItem.name}}
        </div>
        <div class="sheet-content-cell">
          <div class="sheet-content-cell-item">
            <div class="sheet-content-cell-item-name">{{t('Price')}}</div>
            <div class="sheet-content-cell-item-value">₹{{ clickItem.price }}</div>
          </div>
          <div class="sheet-content-cell-item">
            <div class="sheet-content-cell-item-name">{{t('Institutional price')}}</div>
            <div class="sheet-content-cell-item-value">₹{{ clickItem.ins_price }}</div>
          </div>
          <div class="sheet-content-cell-item">
            <div class="sheet-content-cell-item-name">{{t('Bid winning rate')}}</div>
            <div class="sheet-content-cell-item-value">{{ clickItem.win_rate * 100 }} %</div>
          </div>
          <div class="sheet-content-cell-item">
            <div class="sheet-content-cell-item-name">{{t('Winning bid time')}}</div>
            <div class="sheet-content-cell-item-value">{{ date(clickItem.win_time, 'DD/MM/YYYY') }}</div>
          </div>
          <div class="sheet-content-cell-item">
            <div class="sheet-content-cell-item-name">{{t('Open Date')}}</div>
            <div class="sheet-content-cell-item-value">{{ date(clickItem.start_time, 'DD/MM/YYYY') }}</div>
          </div>
          <div class="sheet-content-cell-item">
            <div class="sheet-content-cell-item-name">{{t('Close Date')}}</div>
            <div class="sheet-content-cell-item-value">{{ date(clickItem.end_time, 'DD/MM/YYYY') }}</div>
          </div>
          <!-- <div class="sheet-content-cell-item">
            <div class="sheet-content-cell-item-name">Quantity</div>
            <div class="sheet-content-cell-item-value">
              <van-field style="text-align:right;" placeholder="Please Enter amount" v-model="quantity" :readonly="true"  clickable @touchstart.stop="show = true"></van-field>
              <van-number-keyboard
                v-model="quantity"
                placeholder="请输入"
                :show="show"
                :maxlength="10"
                @blur="show = false"
              />
            </div>
          </div> -->
          <div class="sheet-content-cell-item">
            <div class="sheet-content-cell-item-name">{{t('Trading Balance')}}</div>
            <div class="sheet-content-cell-item-value">₹{{decimalpre(tradeBalance)}}</div>
          </div>
        </div>
        <div class="btns" align="center">
          <van-button style="width: 80%;"  class="btn-item" :loading="subLoading" @click="purchaseIPO">{{t('Purchase')}}</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script setup>
import CustomNavBar from "@/components/CustomNavBar.vue";
import { ref, computed } from "vue";
import { get, post } from '@/utils/request'
import { showLoadingToast, closeToast, showSuccessToast, showToast } from 'vant'
import { date, decimalpre } from "@/utils/util"
import { useRouter } from 'vue-router'
import { t } from '@/languages'
const active = ref(0);
const showPopup = ref(false)
const show = ref(false)
const IPOList = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
const clickItem = ref()
const userDetail = ref({})
const quantity = ref('')
const subLoading = ref(false)
const mode = ref('view')
const router = useRouter()
const tradeBalance = computed(() => {
  return userDetail.value.balance - clickItem.value.price * quantity.value
})

async function getIpoList() {
  try {
    const res = await get('/api/app/ipo/list/', {
      limit: 20,
      page: page.value,
      type: active.value
    })

    IPOList.value = IPOList.value.concat(res.data || [])
    if (IPOList.value.length === res.count) {
      finished.value = true
    } else {
      page.value += 1
    }
  } catch (error) {
    console.log(error)
    finished.value = true
  } finally {
    loading.value = false
  }
}

function onClickTab(e) {
  IPOList.value = []
  page.value = 1
  getIpoList()
}


function openSheetPop(item, mode) {
  showPopup.value = true
  clickItem.value = item
  mode.value = mode || ''
}

async function getUserInfo() {
  const res= await get(`/api/app/getmyinfo/`, {})
  userDetail.value = res
}



async function purchaseIPO() {
  //  if(+quantity.value < clickItem.value.min_num) {
  //   showToast(`The minimum quantity is ${clickItem.value.min_num}`)
  //   return
  //  }
  //   if(+quantity.value > clickItem.value.max_num) {
  //   showToast(`The maxmum quantity is ${clickItem.value.max_num}`)
  //   return
  //  }
  if(tradeBalance.value < 0) {
    showToast(t(`Sory, your balance is running low`))
    return
  }
  try {
    subLoading.value = true
    const res = await post(`/api/app/ipo/sub/`, {
      ipo_id: clickItem.value.id,
      // quantity: +quantity.value
    })
    showPopup.value = false
    showSuccessToast(t('Purchase Success'))
  } catch (error) {
    console.log(error)
  } finally {
    subLoading.value = true
  }
}

function close() {
  quantity.value = ''
  clickItem.value = {}
}


function goDetail(e) {
  router.push({
    path: '/ipo_detail',
    query: {
      id: e.id
    }
  })
}

onMounted(() => {
  getUserInfo()
  getIpoList()

})
</script>
<style lang="scss">
.van-cell {
  padding: 0;
  .van-field__control {
    text-align: right;
  }
}
.tikcer {
  text-align: left;
  font-weight: 600;
   color: #62d8bf;
}
.empty {
  margin-top: 1.86667rem;
  display: flex;
  justify-content: center;
}

.empty img {
  width: 75vw;
  height: 25vh;
}

.tabs .van-tabs__nav {
  background-color: unset;
}

.van-tabs--line .van-tabs__wrap {
  height: 1.17333rem;
}

.tabs .van-tabs__wrap .van-tabs__nav {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.tabs .van-tabs__nav .van-tab {
  color: #325d79;
  flex: none;
  padding: 0 0.4rem;
}

.tabs .van-tabs__nav .van-tabs__line {
  width: 2.4rem;
}

.tabs .van-tabs__nav .van-tab--active {
  color: #62f792 !important;
}

.name {
  color: #62f8a2;
  font-size: 0.42667rem;
  font-weight: 600;
}

.record-list {
  padding: 0.26667rem 0.13333rem;
}
// #c6e9ff
.record-list .record-item {
  border-radius: 0.13333rem;
  border: 0.02667rem solid #2b4e5a;
  background: #0e1822;
  margin: 0.26667rem;
  padding: 0.26667rem;
}

.record-list .record-item .record-item-title {
  padding: 0.13333rem 0;
  text-align: left;
}

.record-list .record-item .record-item-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.26667rem;
}

.record-list .record-item .record-item-content .record-item-content-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.record-list .record-item .record-item-content .record-item-content-item .record-item-content-item-top {
  padding: 0.26667rem 0;
  font-size: 0.37333rem;
  text-align: center;
}

.record-list .record-item .record-item-content .record-item-content-item .record-item-content-item-top .record-item-content-item-top-buy {
  background-color: #62f792;
  color: #0d111a;
  padding: 0.13333rem 0.26667rem;
  border-radius: 0.13333rem;
  width: 3.2rem;
  font-weight: 600;
}

.record-list .record-item .record-item-content .record-item-content-item .record-item-content-item-bottom {
  font-size: 0.37333rem;
  text-align: center;
}

.record-list .record-item .record-item-content .record-item-content-item .record-item-content-item-bottom .record-item-content-item-bottom-details {
  color: #a5a4a4;
  padding: 0.13333rem 0.26667rem;
  border-radius: 0.13333rem;
  border: 0.02667rem solid #325d79;
  width: 3.2rem;
}

.amount {
  color: #62f8a2;
}

.record-list2 {
  padding: 0.26667rem 0.13333rem;
}

.record-list2 .record-item {
  margin: 0.26667rem;
  padding: 0.26667rem;
  border-radius: 0.16rem;
  background: #0e1822;
  border: 0.02667rem solid #2b4e5a;
}

.record-list2 .record-item .record-item-title {
  padding: 0.13333rem 0;
}

.record-list2 .record-item .record-item-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.26667rem;
}

.record-list2 .record-item .record-item-content .record-item-content-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.record-list2 .record-item .record-item-content .record-item-content-item .record-item-content-item-top {
  padding: 0.26667rem 0;
  font-size: 0.37333rem;
  text-align: center;
}

.record-list2 .record-item .record-item-content .record-item-content-item .record-item-content-item-top .record-item-content-item-top-buy {
  background-color: #325d79;
  color: #fff;
  padding: 0.13333rem 0.26667rem;
  border-radius: 0.13333rem;
  width: 2.13333rem;
}

.record-list2 .record-item .record-item-content .record-item-content-item .record-item-content-item-bottom {
  font-size: 0.37333rem;
  text-align: center;
}

.record-list2 .record-item .record-item-content .record-item-content-item .record-item-content-item-bottom .record-item-content-item-bottom-details {
  color: #325d79;
  padding: 0.13333rem 0.26667rem;
  border-radius: 0.13333rem;
  border: 0.02667rem solid #325d79;
  width: 2.13333rem;
}

.record-list2 .record-item .record-item-footer {
  padding: 0.26667rem 0;
  font-size: 0.37333rem;
}

.record-list2 .record-item .record-item-text {
  margin-top: 0.26667rem;
  color: red;
}




.sheet-content {
  padding: 0.26667rem 0.4rem;
  padding-bottom: 1.33333rem;
}

.sheet-content .sheet-content-title {
  display: flex;
  justify-content: space-between;
  font-size: 0.53333rem;
  font-style: normal;
  font-weight: 700;
  margin: 0.53333rem 0;
}

.sheet-content .sheet-content-cell-item {
  border-radius: 0.13333rem;
  border: 0.02667rem solid #2b4e5a;
  background: #c6e9ff;
  display: flex;
  padding: 0.26667rem 0.26667rem;
  align-items: center;
  font-size: 0.37333rem;
  margin-bottom: 0.13333rem;
}

.sheet-content .sheet-content-cell-item .sheet-content-cell-item-name {
  flex: 1;
  color: #333;
}

.sheet-content .sheet-content-cell-item .sheet-content-cell-item-value {
  flex: 1;
  text-align: right;
  color: #333;
}

.sheet-content .cell-buy-container {
  display: flex;
}

.sheet-content .cell-buy-container .cell-buy-balance {
  width: 100%;
  border-radius: 0.13333rem;
  border: 0.02667rem solid #507b97;
  background: #c6e9ff;
  display: flex;
  padding: 0.26667rem 0.26667rem;
}

.sheet-content .cell-buy-container .cell-buy-balance .van-cell {
  padding: 0;
  font-size: 0.42667rem;
  color: #6d6d6d;
  background-color: unset;
}

.sheet-content .cell-buy-container .cell-buy-balance .van-field__label {
  margin-right: 0;
  display: flex;
  align-items: center;
  color: #6d6d6d;
}

.sheet-content .cell-buy-container .cell-buy-balance .van-field__control {
  padding-left: 0.13333rem;
  border-radius: 0.21333rem;
  height: 0.8rem;
  color: #000;
  text-align: right;
}

.sheet-content .btns {
  padding: 0.53333rem 0;
}

.sheet-content .btns .btn-item {
  color: #0e1822;
  border-radius: 0.66667rem;
  text-align: center;
  height: 1.2rem;
  margin: 0 0.4rem;
  font-weight: 600;
  line-height: 1.2rem;
  background: linear-gradient(270deg, #62f792, #63fddb);
}
</style>
